<template>
	<view class="passenger-flow">
		<view class=""
			style="width: 100%;height: 180rpx;background-color: #fff;position: relative;top: 0;z-index: 999;">
			<view class="con-1">
				<view class="bg">
					<view class="address">
						<view class="flex-space-between">
							<view class="flex-align">
								<van-image v-if="itemChooselist.venue_thumb != ''" width="74rpx" height="74rpx"
									radius="2" style="margin-right: 10rpx;" :src="itemChooselist.venue_thumb" />
									<van-image v-else width="74rpx" height="74rpx" radius="10rpx" fit="cover" style="margin-right: 10rpx;"
										src="https://img.yzcdn.cn/vant/cat.jpeg" />
								<!-- <van-image v-else width="74rpx" height="74rpx" radius="10rpx" fit="cover" style="margin-right: 10rpx;" src="https://img.yzcdn.cn/vant/cat.jpeg" /> -->
								<view>
									<view class="address-name">{{itemChooselist.venue_name?itemChooselist.venue_name:''}}</view>
									<view class="address-desc" style="width: 440rpx;">地址:{{itemChooselist.address?itemChooselist.address:''}}</view>
								</view>
							</view>
							<view class="exchange flex-center flex-column " @click="show_no">
								<van-icon name="exchange" size="16" />
								切换
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 场馆切换 -->
		<van-popup closeable :show="show" round position="bottom" get-container="body" @close="showclose"
			:z-index='9999'>
			<view class="good-box">
				<view class="title">
					切换场馆
				</view>
				<view class="good-list">
					<view class="good-item" v-for="(item,index) in venuelist" :key="index" @click="onChangelist(item)">
						<view class="flex-align">
							<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
							<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
								src="https://img.yzcdn.cn/vant/cat.jpeg" />
							<view class="info">
								<view class="name">{{item.venue_name?item.venue_name:''}}</view>
								<view class="flex-align" v-if="item.project_list != ''">
									<view class="tag" v-if="item.project_list[0].name != ''">
										{{item.project_list[0].name||""}}
									</view>
									<view class="tag" v-if="item.project_list[1].name != '' && item.project_list[1]">
										{{item.project_list[1].name||''}}
									</view>
									<view class="tag" v-if="item.project_list[2].name != ''&& item.project_list[2]">
										{{item.project_list[2].name||''}}
									</view>
								</view>
								<view class="address">{{item.address?item.address:''}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	export default {
		name: "con-venues",
		props: {
			title: {
				type: String,
				required: true
			},
			value: {
				type: Boolean,
				default: false
			},
			itemChooselist: {
				type: Object,
				default: () => {}
			}, // 使用函数返回空对象作为默认值
			venuelist: {
				type: Array,
				default: () => []
			}, // 使用函数返回空数组作为默认值
		},
		data() {
			return {
				show: false,
				defaultSelected: [],
				filterData: [],
				localItemChooselist: {}, // 本地副本
				itemChoose: null,
				lineChartData: [],
			}
		},
		created() {
			// 初始化本地副本
			this.localItemChooselist = {
				...this.itemChooselist
			};
		},
		watch: {
			// 监听 props 的变化，并更新本地副本
			itemChooselist: {
				handler(newVal) {
					this.localItemChooselist = {
						...newVal
					};
				},
				deep: true // 深度监听对象变化
			}
		},
		methods: {
			// 选中场馆
			onChangelist(item) {
				this.itemChoose = item;
				this.lineChartData = [];
				// 不要直接修改 props，而是更新本地副本或发射事件让父组件处理
				// this.itemChooselist = item; // 错误做法
				this.show = false;
				this.$emit("confirm", item.id);
			},
			// 点击切换
			show_no() {
				this.show = true
			},
			// 关闭选择场馆弹窗
			showclose() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import '../../static/css/member/member_index.scss';

	.passenger-flow {
		width: 100%;
		// height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: rgb(255, 255, 255);
		// padding: 0rpx 0 50rpx 0;
		// position: relative;

		.tag-list {
			display: flex;
			margin-top: 30rpx;
			padding: 0 20rpx;

			/deep/ view {
				margin-left: 4rpx;
			}
		}

		.con-1 {
			width: 100%;
			position: relative;
			// padding: 0 20rpx;
			z-index: 999;

			.bg {
				width: 100%;
				height: 134rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
				border-radius: 20rpx;
				position: fixed;
				z-index: 999;
				top: -5rpx;

				.address {
					color: #fff;
					padding-top: 20rpx;
					padding-right: 30rpx;
					padding-left: 30rpx;
					height: 150rpx;

					&-name {
						font-size: 34rpx;
						font-weight: 700;
						line-height: 34rpx;
						font-family: PingFang SC;
						color: #333333;
					}

					&-desc {
						margin-top: 18rpx;
						font-size: 22rpx;
						line-height: 22rpx;
						font-family: PingFang SC;
						color: #333333;
					}

					.exchange {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: rgba(0, 0, 0, 0.04);
						color: rgb(0, 0, 0);
						font-size: 24rpx;
					}
				}
			}
		}

		/deep/ .good-box {
			height: 60vh;
			padding: 0px 30rpx;
			display: flex;
			flex-direction: column;

			.title {
				color: #000;
				font-size: 30rpx;
				font-weight: 700;
				margin-top: 40rpx;
			}

			.van-radio__label {
				line-height: inherit;
			}

			.good-list {
				flex: 1;
				height: 0;
				overflow: auto;

				.good-item {
					margin-top: 30rpx;

					.info {
						margin-left: 25rpx;

						.address {
							color: #fff;
							padding-top: 20rpx;
							padding-right: 30rpx;
							height: 70rpx;

							&-name {
								font-size: 34rpx;
								font-weight: 700;
								line-height: 34rpx;
							}

							&-desc {
								margin-top: 18rpx;
								font-size: 22rpx;
								line-height: 22rpx;
							}

							.exchange {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
								background-color: rgba(0, 0, 0, 0.2);
								color: rgb(234, 248, 248);
								font-size: 24rpx;
							}
						}

						.name {
							color: rgb(51, 51, 51);
							font-size: 30rpx;
							font-weight: 500;
							margin-bottom: 10rpx;
						}


						.tag {
							color: rgb(4, 179, 90);
							font-size: 24rpx;
							font-weight: 500;
							padding: 0px 10rpx;
							margin-right: 20rpx;
							background-color: rgba(4, 179, 90, 0.2);
							border-radius: 4rpx;

							&:nth-of-type(2) {
								color: rgb(236, 70, 246);
								background-color: rgba(236, 70, 246, 0.2);
							}
						}

						.address {
							margin-top: 10rpx;
							color: rgb(136, 136, 136);
							font-size: 22rpx;
						}
					}

				}
			}

			.footer {
				padding: 20rpx 0;
				background-color: rgb(255, 255, 255);

				.btn {
					color: rgb(255, 255, 255);
					font-size: 30rpx;
					font-weight: 700;
					padding: 20rpx 0;
					text-align: center;
					background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
					border-radius: 60rpx;
				}
			}
		}
	}
</style>